<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>计算属性</title>
        <script src="js/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            单价: <input type="number" v-model="price"></input><br>
            数量: <input type="number" v-model="count"></input><br>
            总价: {{price * count}} <br>
            总价: {{getTotal()}} 方法<br>
            总价: {{total}}
            <hr>
            <input v-model="text" type="text">
            <hr>
            身高:<input type="number" v-model="height"> m <br>
            体重:<input type="number" v-model="weight"> kg <br>
            BMI: {{bim}}  <br>
            BMI: {{getBim()}} 
            <hr>
            健康状态: {{healthStatus}}  <br>
            <span v-if="bim<18.5">你的体脂偏低</span>
            <span v-else-if="bim>23.9">你的体脂偏高</span>
            <span v-else>你的体脂正常</span> <br>
            正常范围：18.5-23.9 体重/身高的平方
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        price: 5,
                        count: 1,
                        Text:'hello vue',
                        height: '',
                        weight: ''
                    }
                },
                computed:{  //计算属性
                    total() {
                        console.log('计算属性')
                        return this.price * this.count;
                    },
                    bim(){
                        return (this.weight/(this.height*this.height)).toFixed(2)
                    },
                   healthStatus(){
                       if(this.bim<18.5){
                           return '不健康(过轻)'
                       }else if(this.bim>=18.5&&this.bim<=23.9){
                           return '健康(正常)'
                       }else{
                           return '不健康(过重)'
                       }
                   }
                },
                methods: {
                 getTotal() {
                    console.log('方法')
                     return this.price * this.count;
                 },
                 getBim(){
                     return (this.weight/(this.height*this.height)).toFixed(2)
                 }
                }
                }
            ).mount('#app')
        </script>
    </body>
</html>